import { useEffect, useRef, FC, MouseEvent, TouchEvent } from "react";
// import { AudioContext } from "@/reducers/playMusic";
import styles from "./index.module.scss";
interface IProps {
  setAudioValue(vlaue: number): void;
  precent: number;
}
const ProgressBar: FC<IProps> = (props) => {
  const { precent, setAudioValue } = props;
  const inner = useRef<HTMLDivElement | null>();
  const progressRef = useRef<HTMLDivElement | null>();
  const btnRef = useRef<HTMLDivElement | null>();
  const innerWidth = inner.current?.clientWidth || 0; //宽度
  const left = inner.current?.getBoundingClientRect().left || 0;
  useEffect(() => {
    const progresswidth = innerWidth * precent;
    const btnLeft = (innerWidth - 10) * precent;
    if (progressRef.current && btnRef.current && precent !== 1) {
      progressRef.current.style.width = progresswidth + "px";
      btnRef.current.style.left = (btnLeft || -1) + "px";
    }
    return () => {};
  }, [precent, innerWidth]);
  const currentProgress = (e: MouseEvent<HTMLDivElement>) => {
    // 点击当前进度条
    const offsetWidth = e.pageX - left;
    const value = offsetWidth / innerWidth;
    setAudioValue(+value.toFixed(2));
  };
  const progressTouchStart = (e: TouchEvent<HTMLDivElement>) => {
    console.log(e, "开始");
    // 拖动开始
  };
  const progressTouchMove = (e: TouchEvent<HTMLDivElement>) => {
    console.log(e, "过程");

    // 拖动过程
  };
  const ProgressTouchEnd = (e: TouchEvent<HTMLDivElement>) => {
    console.log(e, "结束");

    // 拖动结束
  };
  return (
    <div className={styles.ProgressBar}>
      <div
        ref={(ref) => (inner.current = ref)}
        className={styles.ProgressBar_inner}
        onClick={(e) => currentProgress(e)}
      >
        <div
          className={styles.progress}
          ref={(ref) => (progressRef.current = ref)}
        ></div>
        <div
          ref={(ref) => (btnRef.current = ref)}
          className={styles.btn}
          onTouchStart={(e) => progressTouchStart(e)}
          onTouchMove={(e) => progressTouchMove(e)}
          onTouchEnd={(e) => ProgressTouchEnd(e)}
        ></div>
      </div>
    </div>
  );
};

export default ProgressBar;
